<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description"
			content="学掌门Atstudy网校打造国内精品IT职业在线教育平台,提供软件测试基础,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner等线上IT学习视频课程,利用在线学习便捷性,结合IT职业发展特点,着重加强IT项目实战技能,结合在线答疑,实时笔记,在线题库及测验,满足IT学习者从零基础起步直至IT高级岗位的技能所需,成就IT职业梦想">
		<meta data-n-head="ssr" name="keywords"
			content="学掌门Atstudy网校,博为峰Atstudy网校,Atstudy网校,软件测试在线学习,IT职业教育,IT在线培训,IT在线学习,it职业培训,软件测试自学,测试测试工具,自动化测试,接口测试,软考,istqb,python,移动开发,selenium,loadrunner,大数据">
		<link rel="icon" href="img/favicon.ico">
		<title>学掌门Atstudy网校 - IT在线学习平台|打造精品IT职业在线教育及实战平台</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/bootstrap.js"></script>
		<style type="text/css">
			* {
				text-decoration: none;
			}

			.header .navbar {
				box-shadow: 5px 5px 5px #fbf9fa;
			}

			.logo {
				width: 80%;
				/* margin-bottom: 10px; */
			}

			.navbar-brand {
				padding: 10px 15px;
			}

			.recommend {
				margin-top: 20px;
			}

			.hot {
				margin-top: 10px;
				font-size: 18px;
				font-weight: bold;
			}

			.hot span {
				margin-left: 5px;
			}

			.container-fluid {
				background-color: #302f35;
				height: 300px;
				margin-top: 50px;
				font-size: 12px;
				color: #999999;
			}

			.container-fluid .link {
				margin-top: 30px;
				margin-left: 50px;
			}

			.container-fluid .link li {
				padding-top: 10px;
			}

			.line {
				border-top: #999999 solid 1px;
				margin: 10px 0px;
			}

			.container-fluid .record {
				margin-top: 10px;
			}
		</style>
		<script src="js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				let skuList = localStorage.getItem("sku");
				skuList = JSON.parse(skuList);
				skuList = skuList.slice(0, 8);
				let recommend = ``;
				skuList.forEach(function(val, index) {
					recommend += `<div class="col-md-3">
						<div class="thumbnail">
							<img src="img/r${index+1}.png" alt="...">
							<div class="caption">
								<p>${val.name}</p>
								<p style="color: #ff5a00;">￥${val.price}</p>
								<p><a href="#" class="btn btn-primary cart" role="button" id="${val.id}">加入购物车</a></p>
							</div>
						</div>
					</div>`;
				});
				$('.course').empty();
				$('.course').append(recommend);

				//加入购物车
				$(this).on('click', '.cart', function(e) {
					e.preventDefault(); //屏蔽默认行为
					//根据商品ID从localStorage中获取商品数据
					let id = $(this).attr("id");
					let skuList = localStorage.getItem("sku");
					skuList = JSON.parse(skuList);
					const sku = skuList.find(function(val) {
						return val.id == id;
					});

					//加入购物车
					let cartList = localStorage.getItem("cart");
					cartList = JSON.parse(cartList);
					//根据商品id判断购物车中是否有此商品，如果没有直接push,如果有，修改购买数量num
					let flag = false;
					cartList.forEach(function(val, index, array) {
						if (val.id == sku.id) {
							val.num += 1;
							flag = true;
						}
					});
					if (!flag) {
						sku.num = 1;
						sku.cartId = Math.ceil(Math.random() * 10000)
						sku.paymode = 0;
						sku.createTime = new Date();
						cartList.push(sku);
					}
					//存
					localStorage.setItem("cart", JSON.stringify(cartList))
				})
			})
		</script>
	</head>
	<body>
		<div class="container">
			<!-- 头部导航 -->
			<div class="row header">
				<div class="col-md-12">
					<nav class="navbar">
						<div class="container">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
									data-target="#navbar" aria-expanded="false" aria-controls="navbar">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#"><img src="img/logo.png" class="logo" /></a>
							</div>
							<div id="navbar" class="collapse navbar-collapse">
								<ul class="nav navbar-nav">
									<li class="active"><a href="#" style="color: #ff5a00;">首页</a></li>
									<li><a href="#">选课中心</a></li>
									<li><a href="#">讲师团队</a></li>
									<li><a href="#">意见反馈</a></li>
								</ul>
								<form class="navbar-form navbar-left">
									<input type="text" class="form-control" placeholder="搜索课程..." size="50px"
										class="search-input">
								</form>
								<ul class="nav navbar-nav">
									<li><a href="#">下载APP</a></li>
									<li><a href="#">购物车</a></li>
									<li><a href="#">登录 | 注册</a></li>
								</ul>
							</div><!-- /.nav-collapse -->
						</div><!-- /.container -->
					</nav><!-- /.navbar -->
				</div>
			</div>
			<!-- 轮播图 -->
			<div class="row carousel">
				<div class="col-md-12">
					<div id="myCarousel" class="carousel slide" data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
						</ol>
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img class="first-slide" src="img/1.jpg" alt="First slide">
							</div>
							<div class="item">
								<img class="second-slide" src="img/2.jpg" alt="Second slide">
							</div>
							<div class="item">
								<img class="third-slide" src="img/3.jpg" alt="Third slide">
							</div>
						</div>
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div><!-- /.carousel -->

				</div>
			</div>
			<!-- 推荐课程 头部-->
			<div class="row recommend">
				<div class="col-md-12">
					<nav class="navbar">
						<div class="navbar-header hot">
							<img src="img/free-icon.png" /><span>推荐课程</span>
						</div>
						<div id="navbar" class="collapse navbar-collapse">
							<ul class="nav navbar-nav">
								<li><a href="#">上新</a></li>
								<li><a href="#">免费</a></li>
								<li><a href="#">热门</a></li>
								<li><a href="#">入门</a></li>
								<li><a href="#">进阶</a></li>
							</ul>
							<ul class="nav navbar-nav navbar-right">
								<li><a href="#">更多课程</a></li>
							</ul>
						</div><!-- /.nav-collapse -->
					</nav><!-- /.navbar -->
				</div>
			</div>
			<!-- 推荐课程-->
			<div class="row course">
			</div>
			<!-- 学习路径 头部 -->
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar">
						<div class="navbar-header hot">
							<img src="img/learn-icon.png" /><span>学习路径</span>
						</div>
						<div id="navbar" class="collapse navbar-collapse">
							<ul class="nav navbar-nav navbar-right">
								<li><a href="#">更多课程</a></li>
							</ul>
						</div><!-- /.nav-collapse -->
					</nav><!-- /.navbar -->
				</div>
			</div>
			<!-- 学习路径 -->
			<div class="row path">
				<div class="col-md-4">
					<div class="thumbnail">
						<img src="img/p1.png" alt="...">
						<div class="caption">
							<p>培养既懂 Java，又懂得在大数据平台上利用 Java 完成数据处理、分析和展示的全流程高级技术人才。</p>
							<div class="row">
								<div class="col-md-3">5门课程</div>
								<div class="col-md-3 col-md-offset-6"><a href="#">我要学习</a></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img src="img/p1.png" alt="...">
						<div class="caption">
							<p>培养既懂 Java，又懂得在大数据平台上利用 Java 完成数据处理、分析和展示的全流程高级技术人才。</p>
							<div class="row">
								<div class="col-md-3">5门课程</div>
								<div class="col-md-3 col-md-offset-6"><a href="#">我要学习</a></div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img src="img/p1.png" alt="...">
						<div class="caption">
							<p>培养既懂 Java，又懂得在大数据平台上利用 Java 完成数据处理、分析和展示的全流程高级技术人才。</p>
							<div class="row">
								<div class="col-md-3">5门课程</div>
								<div class="col-md-3 col-md-offset-6"><a href="#">我要学习</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 合作企业 -->
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar">
						<div class="navbar-header hot">
							<img src="img/cooperation-icon.png" /><span>合作企业</span>
						</div>
					</nav><!-- /.navbar -->
				</div>
			</div>
			<!-- 企业列表 -->
			<div class="row">
				<div class="col-md-12">
					<img src="img/logo0603.png" />
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<!-- 友情链接 -->
			<div class="row link">
				<div class="col-md-2"><img src="img/index_logo_foot.png" width="60%" /></div>
				<div class="col-md-2">
					<ul class="nav">
						<li>关于我们</li>
						<li>如何学习</li>
						<li>讲师入驻</li>
						<li>网校介绍</li>
						<li>资讯文章</li>
					</ul>
				</div>
				<div class="col-md-2">
					<ul class="nav">
						<li>友情链接</li>
						<li>51软件测试网</li>
						<li>51测试论坛</li>
						<li>软件测试培训</li>
						<li>赤峰培训中心</li>
					</ul>
				</div>
				<div class="col-md-2">
					<ul class="nav">
						<li>联系我们</li>
						<li>微信：Atstudy-YY</li>
						<li>电话：400-821-0951</li>
						<li>邮箱：wangzhanbu@atstudy.com</li>
						<li>地址：上海市云南北路59号六合大厦</li>
					</ul>
				</div>
				<div class="col-md-2 wechat">
					<p>微信公众号</p>
					<img src="img/index_bottom_wechat.png" />
				</div>
				<div class="col-md-1 qq">
					<p>网校QQ群</p>
					<img src="img/index_bottom_qq.png" />
				</div>
			</div>
			<!-- 分隔线 -->
			<div class="line"></div>
			<!-- 版权 -->
			<div class="row">
				<div class="col-md-10 col-md-offset-2">
					<span>所有版权均归 上海博为峰软件技术股份有限公司 所有 沪ICP备05003035号-2 办学许可证号：131010170000731
						广播电视节目制作经营许可证：（沪）字第04135号</span>
				</div>
			</div>
			<!-- 沪公网 -->
			<div class="row record">
				<div class="col-md-6 col-md-offset-5">
					<img src="img/record-icon.png" />
					<span>沪公网安备 31010102006352号</span>
				</div>
			</div>
		</div>
	</body>
</html>
